<template>
	<view class="content">
		<view class="status_bar"></view>
		<view class="topBar f-c-a">
			<view @click="$to(`../positioningSelection/positioningSelection`)" class="topBar-left f-c-c cw">
				<view>{{currentLocation}}</view>
				<image src="../../static/index/icon_xl.png" mode="widthFix"></image>
			</view>
			<view class="topBar-center f-c-c" @click="$to(`../toSearch/toSearch`)">
				<image src="../../static/index/icon_search.png" mode="widthFix"></image>
				<input type="text" placeholder="搜索商品" placeholder-class="plaCla" />
			</view>
			<view class="topBar-right cw">搜索</view>
		</view>
		<!-- 轮播图 -->
		<view class="swiper">
			<u-swiper @click="rotationDetail" :list="list" height='290'>
			</u-swiper>
		</view>
		<!-- 分类导航 -->
		<view class="classifiedNavigation f-c-b"
			@click="$to(`../index_commodityclassification/index_commodityclassification`)">
			<view class="classifiedNavigation-left f30">
				<image src="../../static/index/icon_fldh.png" mode="widthFix"></image>
				<text>分类导航</text>
			</view>
			<view class="classifiedNavigation-right f-c-c">
				<u-icon color="#ffffff" size='25' name="arrow-right"></u-icon>
			</view>
		</view>
		<!-- 自由市场和特惠专区 -->
		<view class="MarketsAndZones f-c-b">
			<view @click="toPage(index)" v-for="(item,index) in tabsList" :class="index===0?'markets':'Zones'">
				<view class="markets-left">
					<view class="f30 markets-left-title">{{item.title}}</view>
					<view class="f25 c6">{{item.content}}</view>
				</view>
				<view :class="index===0?'marketsIcon f-c-c':'ZonesIcon f-c-c'">
					<u-icon color="#ffffff" size='25' name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<!-- 行业咨询 -->
		<view class="industryConsultation f-c-c">
			<view class="industryConsultation-Image">
				<image src="../../static/index/img_tp.png" mode="widthFix"></image>
			</view>
			<view class="industryConsultation-content">
				<view class="title f30">标题</view>
				<view class="contenti f25">
					此处填写的是后台上传的行业咨询内容此处 填写的是后台上传的行业咨询内容
				</view>
			</view>
		</view>
		<!-- 推荐 -->
		<view class="recommend">
			<view class="recommendTitle f35">推荐</view>
			<view class="recommendAll">
				<view @click="$to(`../product_detail/product_detail`)" v-for="(item,index) in commodityList"
					class="recommendItem f-c">
					<view class="likeImg" @click="item.likeFlag=!item.likeFlag">
						<image :src="item.likeFlag?likeYes:likeNo" mode="widthFix"></image>
					</view>
					<view class="recommendItem-img f-c-c">
						<image :src="item.image" mode="widthFix"></image>
					</view>
					<view class="recommendItem-img-info f-c-b f30 fw">
						<view>{{item.title}}</view>
						<view class="f35">￥{{item.price}}</view>
					</view>
					<view class="f-c-a f25">
						<view>库存：{{item.stock}}</view>
						<view>浏览：{{item.browse}}</view>
					</view>
					<view class="operation f-c-a">
						<image src="../../static/index/icon_phone.png" mode="widthFix"></image>
						<image src="../../static/index/icon_xx.png" mode="widthFix"></image>
						<image src="../../static/index/icon_fx.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="f-c-c f25 c6">
			更多商家入驻中，敬请期待...
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentLocation: "",
				list: [],
				tabsList: [{
						title: '自由市场',
						content: '实现买卖自由'
					},
					{
						title: '特价专区',
						content: '优惠享不停'
					}
				],
				likeNo: '../../static/index/img_wdz.png',
				likeYes: '../../static/index/img_ydz.png',
				commodityList: [{
					image: '../../static/index/img_sp.png',
					title: '红木',
					stock: 515,
					browse: 200,
					likeFlag: false,
					price: 20
				}, {
					image: '../../static/index/img_sp2.png',
					title: '红木',
					stock: 515,
					browse: 200,
					likeFlag: true,
					price: 100
				}]
			}
		},
		methods: {
			toPage(index) {
				console.log(index === 0);
				if (index === 0) {
					this.$to(
						`../index_commodityclassification-detail-detail/index_commodityclassification-detail-detail?title=自由市场`
					)
				} else {
					this.$to('../zone/zone')
				}
			},
			async rotationInfo() {
				const { data, success, msg } = await this.$u.api.rotationInfo()
				console.log(data);
				console.log(success);
				console.log(msg);
				data.forEach(item => {
					if (item.rtype == 1) {
						this.list.push({
							image:this.$u.baseUrl+item.rcoverimg,
							id:item.id
						})
					}
				});
				console.log(this.list);
			},
			rotationDetail(i){
				this.$to(`../index_carouselDetails/index_carouselDetails?id=${this.list[i].id}`)
			}
		},
		watch: {
			currentLocation() {
				console.log(1);
			}
		},
		onLoad(e) {
			var that = this
			uni.getLocation({
				type: 'gcj02',
				geocode: true,
				success: (res) => {
					console.log(res);
					that.currentLocation = res.address.city;
				}
			})
			this.rotationInfo()
		},
		mounted() {
			uni.$on('currentCity', data => {
				this.currentLocation = data
				console.log(data)
				//  这里可以修改数据
			})
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background-color: #ececec;
		padding-bottom: 20rpx;
	}

	.topBar {
		background-color: $uni-color-primary;
		padding: 30rpx 0;
	}

	.topBar-left image {
		width: 20rpx;
		margin-left: 10rpx;
	}

	.topBar-center {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 10rpx 50rpx 10rpx 20rpx;
	}

	.topBar-center image {
		width: 30rpx;
	}

	.topBar-center input {
		padding-left: 20rpx;
	}

	.topBar-right {
		margin-left: -20rpx;
	}

	.swiper {
		padding: 20rpx;
	}

	.classifiedNavigation-left image {
		width: 35rpx;
		margin-right: 20rpx;
	}

	.classifiedNavigation-left {
		color: #4A86FE;
		font-weight: 600;
	}

	.classifiedNavigation {
		height: 144rpx;
		margin: 0 20rpx;
		background-image: url(../../static/index/img_fl.png);
		background-size: 100% 100%;
		padding: 0 30rpx;
	}

	.classifiedNavigation-right,
	.marketsIcon,
	.ZonesIcon {
		width: 40rpx;
		height: 40rpx;
		background-color: #4A86FE;
		border-radius: 50%;
	}

	.MarketsAndZones {
		margin: 20rpx;
	}

	.markets,
	.Zones {
		padding: 30rpx;
		background-image: url(../../static/index/img_zysc.png);
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #E28501;
	}

	.Zones {
		background-image: url(../../static/index/img_tjzq.png);
		color: #01A37C;
	}

	.markets-left {
		padding-right: 95rpx;
	}

	.markets-left-title {
		padding-bottom: 10rpx;
	}

	.marketsIcon {
		background-color: #E28501;
	}

	.ZonesIcon {
		background-color: #01A37C;
	}

	.industryConsultation {
		background-color: #FFFFFF;
		margin: 20rpx;
		border-radius: 10rpx;
	}

	.industryConsultation-Image {
		border: 1rpx solid #ececec;
		border-radius: 10rpx;
		margin: 20rpx;
	}

	.industryConsultation-Image image {
		width: 120rpx;
	}

	.industryConsultation-content .title {
		font-weight: 700;
		color: #666;
	}

	.industryConsultation-content .contenti {
		color: #999;
	}

	.recommend {
		margin: 20rpx;
	}

	.recommendTitle {
		font-weight: 700;
	}

	.recommendItem-img image {
		width: 300rpx;
		margin: 20rpx 0;
	}

	.recommendItem {
		background-color: #FFFFFF;
		width: 340rpx;
		margin: 6rpx;
		position: relative;
	}

	.recommendItem-img-info {
		margin: 0 20rpx 10rpx 20rpx;
		border-bottom: 1rpx solid #EEEEEE;
		padding-bottom: 10rpx;
	}

	.recommendItem-img-info view:nth-child(2) {
		color: #FF2929;
	}

	.operation {
		border-top: 1rpx solid #EEEEEE;
		margin: 20rpx 0;
		padding-top: 20rpx;
	}

	.operation image {
		width: 33rpx;
	}

	.recommendAll {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.likeImg {
		position: absolute;
		z-index: 999;
		right: -10rpx;
	}

	.likeImg image {
		width: 80rpx;
	}

	.plaCla {
		color: #999999;
		font-size: 30rpx
	}
</style>
